<template>
    <div class="playlist">
        <!-- 播放全部 -->
        <div class="playlist-top">
            <div class="left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang3"></use>
                </svg>
                <div class="text">
                    <div class="title">播放全部</div>
                    <div class="num">(共{{playlist.tracks.length}}首)</div>
                </div>
            </div>
            <div class="btn">
                + 收藏（{{changsValue(playlist.subscribedCount)}}）
            </div>
        </div>
        <!-- 播放列表 -->
        <div class="list">
            <div class="playItem" v-for="(item, index) in playlist.tracks" :key="index">
                <div class="left">
                    <div class="index">{{index+1}}</div>
                    <div class="content">
                        <div class="title">{{item.name}}</div>
                        <div class="anthor">
                            <span class="tag" v-for="(tag,index) in playlist.tags.slice(0,1)" :key="index">{{tag}}</span>
                            <span class="name">{{item.al.name}}</span>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <svg class="icon" aria-hidden="true" @click="setPlayIndex(index)">
                        <use xlink:href="#icon-bofang2"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations} from 'vuex'
    export default {
        name: "playList",
        props:['playlist'],
        methods:{
            changsValue:function(num) {
                let res = 0
                if(num>=100000000) {
                    res = num / 100000000
                    // toFixed(2)  vue中toFixed获取小数点后两位
                    res = res.toFixed(2) + '亿'
                }else if(num>10000){
                    res = num/10000
                    // toFixed(2)  vue中toFixed获取小数点后两位
                    res = res.toFixed(2) + '万'
                }
                return res
        },
        ...mapMutations(['setPlayIndex'])
    }
}
</script>

<style lang="less" scoped>
.playlist {
    width: 7.5rem;
    padding: 0 0.4rem;
    background-color: #fff;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    margin-top: 0.4rem;
    .playlist-top {
        display: flex;
        justify-content: space-between;
        height: 1rem;
        align-items: center;
        .left {
            display: flex;
            align-items: center;
            color: #666;
            .icon {
                width: 0.6rem;
                height: 0.6rem;
            }
            .title {
                font-size: 0.34rem;
                font-weight: 900;
            }
            .num {
                font-size: 0.24rem;
                color: #666;
            }
            .text {
                display: flex;
                align-items: center;
                margin-left: 0.2rem;
            }
        }
        .btn {
            font-size: 0.24rem;
            color: #fff;
            background-color: orangered;
            line-height: 0.6rem;
            padding: 0.1rem;
            border-radius: 0.4rem;
        }
    }
    .list {
        .playItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1rem;
            .left {
                display: flex;
                align-items: center;
                .index {
                    width: 0.4rem;
                }
                .content {
                    margin-left: 0.4rem;
                }
                .title {
                    font-size: 0.3rem;
                    font-weight: 900;
                    color: #000;
                    margin-bottom: 0.1rem;
                }
                .tag {
                    font-size: 0.2rem;
                    color: orangered;
                    border: 1px solid orangered;
                    border-radius: 0.1rem;
                    margin-right: 0.08rem;
                }
                .author {
                    color: #666;
                }
            }
            .right {
                .icon {
                    margin: 0 0.2rem;
                }
            }
        }
    }
}

</style>

